<template>
  <div class="pos">
    <i class="el-icon-menu"></i>
    <span class="shou"> 收银</span>
    <hr />

    <el-row>
      <el-col :span="10" class="pos-order" id="orderlist">
        <div class="left">
          <el-input
            v-model="search"
             :disabled="!checked"
            placeholder="请输入商品条码或扫码"
          ></el-input>
          <el-button @click="chaxun" >查询</el-button>
          <el-checkbox v-model="checked">手动输入条形码</el-checkbox>
          <div class="center">
            <span>收银员：001</span>
            <span>日期：{{ nowTime }}</span>
          </div>

          <el-table
            border
            style="width: 100%"
            :data="data"
            :header-cell-style="{ background: '#909399', color: '#ffffff' }"

          >
            <el-table-column  label="序号" align="center">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" align="center">
            </el-table-column>
            <el-table-column prop="price" label="单价" align="center">
              <template slot-scope="scope">
                <div>￥{{ scope.row.price  | keepOneNum}}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="quantity"
              label="数量"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <input
                  v-model="scope.row.quantity"
                  align="center"
                  class="input"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="money"
              label="金额"
              width="100%"
              align="center"
            >
              <template slot-scope="scope">
                {{
                  (scope.row.sum = scope.row.price)
                    | keepTwoNum
                }}
              </template>
            </el-table-column>
          </el-table>
          
          <div
            style="text-align: right; line-height: 30px; "
            class="amount"
          >
            <!-- 合计：<input v-model="sum" :disabled="disabled"> -->
            合计：￥<span :disabled="disabled">{{ sums.toFixed(2) }}</span>
          </div>
           
        </div>
        <div class="btn1">
          <el-button
            type="info"
            size="default"
            align="center"
            @click="distinguishCancelAndClose = true"
            >结账</el-button
          >
        </div>
        
        <div class="dialog">
          <el-dialog title="结账信息" :visible.sync="distinguishCancelAndClose">
            <hr />
            <el-col :span="10" class="pos-o" id="orderlist">
              <div>
                <div class="center">
                  <span>收银员：001</span>
                  <span>日期：{{ nowTime }}</span>
                  <span>流水号：{{ serialNumber }}</span>
                </div>

                <el-table
           
                  class="table"
                  style="width: 100%"
                  :data="data"
                  :header-cell-style="{
                    background: '#909399',
                    color: '#ffffff',
                  }"
                >
                  <el-table-column prop="id" label="序号" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="商品名称" align="center">
                  </el-table-column>
                  <el-table-column prop="price" label="单价" align="center">
                    <template slot-scope="scope">
                      <div>￥{{ scope.row.price | keepOneNum}}</div>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="quantity"
                    label="数量"
                    width="200px"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <input
                        v-model="scope.row.quantity"
                        align="center"
                        class="input"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="money"
                    label="金额"
                    width="100%"
                    align="center"
                  >
                    <template slot-scope="scope">
                      {{
                        (scope.row.sum = scope.row.price * scope.row.quantity)
                          | keepTwoNum
                      }}
                    </template>
                  </el-table-column>
                </el-table>

                <div
                  style="
                    text-align: right;
                    line-height: 30px;
               
                  "
                  class="amount"
                >
                  <!-- 合计：<input v-model="sum" :disabled="disabled"> -->
                  合计：￥<span :disabled="disabled">{{
                    sums.toFixed(2)
                  }}</span>
                  <hr class="hr" />
                  <div class="Discount">
                    <span>*部分商品享受买一赠一活动</span>
                    
                 

                  </div>
                </div>
              </div>
              <div class="btn">
                <span
                  >实收：<input type="text" align="center" class="g-input" v-model="sum"  
                /></span>
                <span>找零：{{ giveChange > 0 ? giveChange: ''  | keepTwoNum}}</span>
                <el-button type="info" size="default" @click="out"
                :dangerouslyUseHTMLString="bian"
                  >确认收银</el-button
                >
              </div>
            </el-col>
          </el-dialog>
         <el-dialog class="dia" :visible.sync="dangerouslyUseHTMLString" align="center"> <el-button @click="checkout" >打印票据</el-button></el-dialog>
        </div>
      </el-col>
    </el-row>
  <div id="pay_form"></div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    return {
      bian:false,
      barcode:"",
      sum:100,
      serialNumber: "",
      give:"",
      disabled: "",
      distinguishCancelAndClose:false,
      timer: '', //定义的计数器
      nowTime: '',
      searchData: "",
      search:"",
      checked: true,
    outdata:{
        barcode:[],
        name:[],
        price:[],
        quantity:[],
    },
    tt:[],
      data: [],
      dangerouslyUseHTMLString: false,
           tableData: [
        
      ]
    
    };
  },
  
  filters: {
    keepTwoNum(value) {
      value = Number(value);
      return value.toFixed(2);
    },
    keepOneNum(value) {
      value = Number(value);
      return value.toFixed(1);
    },
  
  },
  mounted() {
    
     //时间转换
    this.timer = setInterval(() => {
      let date = new Date();
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
     
      // 拼接
      this.nowTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes ;
      // return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    }, 1000)
    
  },
  
 
created () {
  // 调用获取当前日期的方法加四位随机数  赋值表单中的项目编号
  this.serialNumber = this.getProjectNum() + Math.floor(Math.random() * 10000)  // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了
},


  methods: {
    getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = Year
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    },
check(){
  this.checked = !this.checked;
},
     beforeDestroy () {
    window.clearInterval(this.timer) //clearInterval() 方法来停止执行这个计时器
     },
    //查询
    chaxun(){
   
      this.$axios({
      url: "http://server.hloli.cn:23300/api/selCash",
      method:"post",
      params:{
        barcode:this.search, 
      }

    }).then((res) => {
      console.log(res);
      // this.data = res.data.data;
      this.data.push(res.data.data);

      console.log(this.data)
      
    });

    },
    //结账
   out(){
      this.bian= true;
      for(let i=0;i < this.data.length;i ++){
        this.outdata.barcode.push(this.data[i].barcode)
        this.outdata.name.push(this.data[i].name);
        this.outdata.price.push(this.data[i].price.toFixed(2));
        this.outdata.quantity.push(this.data[i].quantity);
      }
        this.$axios({
      url: "http://server.hloli.cn:23300/api/addCash",
      method:"get",
      params:{
        out_trade_on:'',
        barcode:this.outdata.barcode,
        name:this.outdata.name,
        price:this.outdata.price,
        quantity:this.outdata.quantity,
      },
      paramsSerializer: params => {
        return qs.stringify(params, { indices: false })
      }
      // {
      //   barcode:this.barcode,
      //   name:this.name,
      //   price:this.price,
      //   quantity:this.quantity,
      //     out_trade_no:"",
      // }

    }).then((res) => {
      console.log(res);
      var form = res.data;
      console.log(form);
      var pay_form = document.getElementById('pay_form');
      pay_form.innerHTML = form;
      var su_form = pay_form.childNodes;
      su_form[0].submit();
      // this.data = res.data.data;
    
    });

    },

    //模拟结账
    checkout() {
      this.distinguishCancelAndClose = false;
      this.dangerouslyUseHTMLString = false;
     
     
      if (this.sumPrice != 0) {
        this.tableData = [];
        this.sumPrice = 0;
        //element提供的属性
        this.$message({
          message: "结账成功",
          type: "success",
        });
     
      } else {
        this.$message.error("没有商品");
      }
    },
    gv() {
    let quantity;
    if(quantity > 1){
      return  this.give;
    }
  }
  },

  computed: {
   Number(){
     Math.round(Math.random()*5);
    },


    //表格中的金额合计总价格
    sumMoney() {
      return this.data
        .map((row) => row.price)
        .reduce((acc, cur) => parseFloat(cur) + acc, 0);
    },
    //所有费用合计
    sums: function () {
      return this.sumMoney;
    },
    giveChange() {
      return this.sum - this.sumMoney;
    },
  // 查询
  
    
  },
};
</script>

<style scoped>
.pos{
    width: 80%;
    height: 100%;
    margin-left: 50px;
}
.dialog {
  border: none;
}
.el-dialog {
  padding: 20px;
}
.pos-o {
  width: 100%;
  height: 100%;
  background-color: #f9fafc;
}
.left{
    margin-left: 50px;
}
.dia{
  margin-top: 120px;
  width: 600px;
  height: 500px;
  margin-left: 450px;
}
.pos-order {
  background-color: #f8f8fad8;
  height: 1000px;
  width: 100%;
  padding: 20px;
  margin-top: 15px;
}

.btn1 {
  padding-right: 20px;
  margin: center;
   margin-top: 110px;
  font-size: 30px;
  width: 150px;
  height: 35px;
}
.btn {
  padding-right: 20px;
  margin: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 20px;
}
.title {
  height: 20px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: center;
}
.el-icon-menu {
  font-size: 25px;
  color: #59595e;
 margin-top: 20px;
}
.shou{
 font-size: 16px;
 color: slategray;
}
.amount {
  padding: 20px;
}
.el-input {
  width: 200px;
  margin-right: 20px;
}
.el-button {
  padding-right: 20px;
  margin-left: 15px;
}
.el-checkbox {
  padding-left: 33px;
}
.center {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.amount-warp {
  display: flex;
}
.border {
  width: 31px;
  height: 31px;
}
.el-col {
  float: none;
}
.input {
  width: 30px;
  border:none;

outline:medium;

}
.giveIn{
  width:25px;
  height: 15px;
    border:none;

outline:medium;
}
.g-input {
   width: 40px;
  border:none;

outline:medium;
font-size: 21px;
color: #666666;
}
.amount {
  padding: 20px;

}

.el-col {
  display: flex;
  justify-content: space-between;
}
.Discount {
  display: flex;
  justify-content: space-between;
  color:#8d9094 ;
  font-size: 12px;
}
.customer-no-border-table th {
  border: none;
}
.hr {
  border: none;
  border-top: 2px dashed #7a7c7e;
}
hr{
 margin-top: 15px;
}
</style>

